<template>
    <div class="control">
        <div class="control_btn prev" @click="handlePrev">
            <i class="fa fa-backward"></i>
        </div>
        <div class="control_btn play" @click="handlePlay">
            <i :class="playState"></i>
        </div>
        <div class="control_btn next" @click="handleNext">
            <i class="fa fa-forward"></i>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { player } from '@/utils/player'
export default defineComponent({
    setup() {
        const store = useStore()
        const playState = computed( ()=> {
            return store.state.isplaying ? 'el-icon-video-play' : 'el-icon-video-pause'
        })
        const state = reactive({
            qq: true
        })
        function handlePrev() {
            if(store.state.isplaying){
                player.prev()
            }
            console.log('上一曲')
        }
        function handlePlay() {
            if(!player.isEmpty){
                if(!store.state.isplaying){
                    player.play()
                    console.log('播放')
                    console.log(player.playList)
                }
            }else{
                player.pause()
                console.log('暂停')
            }
        }
        function handleNext() {
            if (store.state.isplaying) {
                player.next();
            }
            console.log('下一曲')
        }
        return {
            ...toRefs(state),
            handlePrev,
            handlePlay,
            handleNext,
            playState
        }
    },
})
</script>
<style scoped>
.control{
    width: 100%;
    display: flex;
}
.control-btn{
    background-color:dodgerblue;
    width: 20px;
    height: 20px;
    margin: 10px; 
}
</style>
